<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
      class="globalSerchFormStyle"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="地区" prop="icCardno">
            <el-select
              v-model="queryParams.cardType"
              placeholder="请选择地区"
              clearable
              size="small"
              style="width: 190px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="团队名称" prop="icCardname">
            <el-input
              v-model="queryParams.icCardname"
              placeholder="请输入团队名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="负责人" prop="icCardname">
            <el-input
              v-model="queryParams.icCardname"
              placeholder="请输入负责人"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="时间">
            <el-date-picker
              style="width: 190px"
              v-model="dateRangeCreatedDate"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              size="mini"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
          type="primary"
          plain
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" icon="el-icon-plus" @click="resetQuery" plain
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button size="mini" icon="el-icon-delete" @click="resetQuery" plain
          >删除</el-button
        >
      </el-col>
    </el-row>

    <el-table :data="record" @selection-change="handleSelectionChange" stripe>
      <el-table-column type="selection" width="55" align="left" />
      <el-table-column
        label="油企名称"
        align="left"
        prop="prisename"
        width="120"
        :formatter="changecardTypeProp"
        sortable
      />
      <el-table-column
        label="油站名称"
        align="left"
        prop="stationname"
        width="140"
        sortable
      />
      <el-table-column
        label="持卡人"
        align="left"
        prop="cardPeople"
        width="120"
        sortable
      />
      <el-table-column
        label="手机号"
        align="left"
        prop="phoneNumber"
        width="180"
        sortable
      />
      <el-table-column
        label="订单号"
        align="left"
        prop="orderNo"
        width="180"
        sortable
      />
      <el-table-column
        label="订单类型"
        align="left"
        prop="orderType"
        width="120"
        sortable
      />
      <el-table-column
        label="订单金额(元)"
        align="left"
        prop="orderPay"
        width="140"
        sortable
      />
      <el-table-column
        label="余额(元)"
        align="left"
        prop="price"
        width="120"
        sortable
      />
      <el-table-column
        label="卡号"
        align="left"
        prop="cardNo"
        width="180"
        sortable
      />
      <el-table-column
        label="企业名称"
        align="left"
        prop="enterprise"
        width="140"
        sortable
      />
      <el-table-column
        label="卡名称"
        align="left"
        prop="cardName"
        width="120"
        sortable
      />
      <el-table-column
        label="支付时间"
        align="left"
        prop="payTime"
        width="180"
        sortable
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.payTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "cardRecord",
  data() {
    return {
      // 折叠开关
      collapse: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 卡编号表格数据
      infoList: [],
      statistics: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      openPay: false,
      // 是否弹出充值密码
      openPasswd: false,
      options: [
        {
          value: "0",
          label: "通用",
        },
        {
          value: "1",
          label: "汽油",
        },
        {
          value: "2",
          label: "柴油",
        },
        {
          value: "3",
          label: "LNG",
        },
        {
          value: "4",
          label: "CNG",
        },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        icCardno: null,
        icContactsphone: null,
        cardType: null,
        icCardname: null,
        createDate: null,
        icContacts: null,
        password: null,
        amt: null,
        enable: 1,
        issecret: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      record: [
        {
          prisename: "油企a",
          stationname: "a油站",
          cardPeople: "pretty",
          phoneNumber: "18888888888",
          orderNo: "8237981723821312",
          orderType: "充值",
          orderPay: "888",
          price: "8888",
          cardNo: 2308001,
          enterprise: "jioewjow",
          cardName: "一路发",
          payTime: "2023-08-15 23:00:00",
        },
        {
          prisename: "油企a",
          stationname: "a油站",
          cardPeople: "pretty",
          phoneNumber: "18888888888",
          orderNo: "8237981723821312",
          orderType: "充值",
          orderPay: "888",
          price: "8888",
          cardNo: 2308001,
          enterprise: "jioewjow",
          cardName: "一路发",
          payTime: "2023-08-15 23:00:00",
        },
      ],
    };
  },
  created() {},
  methods: {},
};
</script>
<style scoped lang="scss"></style>
